<template>
	<view class="addPet">
		<view class="addPetTopBack">
			<u-form :model="form" ref="uForm">

				<view class="addPetTop addPetTopOne">
					<view class="addPetTopTitleDiv">
						<view class="addPetTopTitleLeft"></view>
						<text class="addPetTopTitleText">添加宠物照片 </text>
						<text class="yes" style="color: red;">*</text>
					</view>
					<view class="addPetBottom">
						<u-form-item :border-bottom="false" prop="img">
							<view class="uploadDiv" @tap="chooseImage">

								<image v-if="form.head" :src="form.head" class="uploadImg"></image>
								<image v-else class="uploadLiDiv"
									src="https://chongwu.aitaoba.net/storage/uploads/20231118/5e626da4dff51aa393dc549212813477.png">
								</image>
							</view>
						</u-form-item>

					</view>
				</view>
				<view class="addPetTop addPetTopTow">
					<view class="addPetTopTitleDiv">
						<view class="addPetTopTitleLeft"></view>
						<text class="addPetTopTitleText">宠物信息</text>
					</view>

					<u-form-item label="宠物昵称" label-width="314rpx" prop="nickname" required>
						<u-input v-model="form.nickname" placeholder="请填写宠物昵称" />
					</u-form-item>
					<u-form-item label="宠物分类" label-width="314rpx" prop="cate_id" required>
						<picker @change="cateChangeFun" :value="cate_id" :range="cate_list">
							<view :class="form.cate_id ?  '' : 'placeholder'">
								{{form.cate_id ?  cate_list[cate_id] : '请选择宠物分类'}}
								<!-- {{petDetailData.cate_id ?  petDetailData.cate_name : '请选择宠物分类'}} -->
							</view>
						</picker>
						<!-- <uniDataSelect :widthNum="286" :localdata="cate_list" :modelValue="form.cate_id"
							:value="form.cate_id" @change="cateChangeFun" :clear="false" placeholder="请选择宠物分类">
						</uniDataSelect> -->
					</u-form-item>
					<u-form-item label="宠物生日" label-width="314rpx" prop="intdate">
						<picker mode="date" :value="form.birth_date" @change="birthChangeFun">
							<view :class="form.birth_date ? '' : 'placeholder'">
								{{form.birth_date ? form.birth_date : '请选择宠物生日'}}
							</view>
						</picker>
						<!-- <uniDataSelect :widthNum="286" :localdata="birth_list" :modelValue="form.birth_date"
							:value="form.birth_date" @change="birthChangeFun" :clear="false" placeholder="请选择宠物生日">
						</uniDataSelect> -->
						<!-- <u-input v-model="form.birth_date" placeholder="请选择宠物生日"  @click="modelState=true"/> -->
					</u-form-item>
					<u-form-item label="宠物性别" label-width="314rpx">
						<picker @change="sexchangeFun" :value="form.sex" :range="sexList">
							<view :class="form.sex ?  '' : form.sex != '' ? '' : 'placeholder'">
								{{form.sex ?  sexList[sexIndex] : form.sex != '' ? sexList[0] : '请选择宠物性别'}}
							</view>
						</picker>
						<!-- <uniDataSelect :widthNum="286" :localdata="sexList" :modelValue="form.sex" :value="form.sex"
							@change="sexchangeFun" :clear="false" placeholder="请选择宠物性别"></uniDataSelect> -->
					</u-form-item>
					<u-form-item label="宠物品种" label-width="314rpx">
						<u-input v-model="form.breed" placeholder="请填写宠物品种" />
					</u-form-item>
					<u-form-item label="备注" label-width="314rpx" label-position="top" :border-bottom="false">
						<u-input v-model="form.remark" :value="form.remark" placeholder="请填写备注" />
					</u-form-item>
				</view>
				<view class="addPetTop addPetTopTow">
					<view class="addPetTopTitleDiv">
						<view class="addPetTopTitleLeft"></view>
						<text class="addPetTopTitleText">主人信息</text>
					</view>

					<u-form-item label="主人称呼" required label-width="314rpx" prop="user_call">
						<u-input v-model="form.user_call" placeholder="请填写主人称呼" />
					</u-form-item>
					<u-form-item label="联系方式1" required label-width="314rpx" prop="phone_1">
						<!-- 	<uniDataSelect :widthNum="286" :localdata="telList" :modelValue="form.phone_1"
							:value="form.phone_1" @change="phone_1changeFun" :clear="false" placeholder="请选择联系方式1">
						</uniDataSelect> -->
						<u-input v-model="form.phone_1" placeholder="请输入联系方式1" />
					</u-form-item>
					<u-form-item label="联系方式2" required label-width="314rpx" :border-bottom="false">
						<!-- 	<uniDataSelect :widthNum="286" :localdata="telList" :modelValue="form.phone_2"
							:value="form.phone_2" @change="phone_2changeFun" :clear="false" placeholder="请选择联系方式2">
						</uniDataSelect> -->
						<u-input v-model="form.phone_2" placeholder="请输入联系方式2" />
					</u-form-item>
				</view>
				<view class="kongbai"></view>
				<button class="submitButtonClass" @click="submit">保存</button>

			</u-form>


		</view>
		<u-calendar v-model="modelState" mode="date" @change="calendarChange"></u-calendar>



	</view>
</template>

<script>
	import configJson from '@/config/config.js'
	import uniDataSelect from '@/components/uniDataSelect/uniDataSelect.vue'
	import {
		getPetCateList,
		addPet,
		petDetail,
		petEdit
	} from '@/api/pet.js'
	export default {
		components: {
			uniDataSelect,
		},
		data() {
			return {

				modelState: false,
				itemData: {},
				array: ['1', '2'],
				index: '',
				form: {
					head: '',
					nickname: '',
					birth_date: '',
					sex: '',
					breed: '',
					remark: '如果被好心的你捡到，麻烦联系主人，谢谢!!',
					user_call: '',
					phone_1: '',
					cate_id: '',
				},
				rules: {
					head: [{
						required: true,
						message: '请上传宠物照片',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					nickname: [{
						required: true,
						message: '请输入宠物昵称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					cate_id: [{
						required: true,
						message: '请选择宠物分类',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					birth_date: [{
						required: true,
						message: '请选择宠物生日',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					sex: [{
						required: true,
						message: '请选择宠物性别',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],

					breed: [{
						required: true,
						message: '请输入宠物品种',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					remark: [{
						required: true,
						message: '请输入备注',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					user_call: [{
						required: true,
						message: '请输入主人称呼',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					phone_1: [{
						required: true,
						message: '请选择联系方式1',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},

				checkboxList: [{
						name: '苹果',
						checked: false,
						disabled: false
					},
					{
						name: '雪梨',
						checked: false,
						disabled: false
					},
					{
						name: '柠檬',
						checked: false,
						disabled: false
					}
				],
				radioList: [{
						name: '鲜甜',
						disabled: false
					},
					{
						name: '麻辣',
						disabled: false
					}
				],
				radio: '',
				switchVal: false,
				cate_id: '',
				cate_list: [],
				cate_list_array: [],
				petDetailData: {},
				birth_list: [{
					text: '2021-11-05',
					value: '2021-11-05'
				}, {
					text: '2021-12-05',
					value: '2021-12-05'
				}, ],
				sexIndex: '',
				sexList: ['囡囡', '仔仔'],
				sexListArray: [{
					text: '囡囡',
					value: '1'
				}, {
					text: '仔仔',
					value: '2'
				}],
				telList: [{
					text: '15856422372',
					value: '15856422372'
				}],
				pageStatus: 'add',
			};
		},

		/**
		 * 跳转到个人中心
		 */
		onBackPress(e) {

		},
		onPullDownRefresh() {

		},
		onShow() {
			this.PetCateList()
		},

		onLoad(options) {
			console.log(options, 'options')
			let that = this;


			if (options.item === undefined) {
				this.pageStatus = 'add'
				this.pageTitle = '添加宠物'
				this.form.sex = 1
				this.sexIndex = '0'
				console.log(this.sexIndex, 'sexxxxx')
				if (options.card_sn) {
					this.form.card_code = options.card_sn
				}
				delete this.form.id;
			} else {
				this.pageStatus = 'edit'
				this.pageTitle = '编辑宠物'
				this.form.id = JSON.parse(options.item).id;
				this.itemData = JSON.parse(options.item);
				this.getPetDetail(JSON.parse(options.item));
				console.log(this.sexIndex, 'sexxxxx2222')

				// this.cate_id = this.petDetailData.data.cate_id
			}
			uni.setNavigationBarTitle({
				title: that.pageTitle
			})

			console.log(this.form, 'ooososososososo')


		},

		watch: {

		},
		methods: {


			calendarChange(e) {
				console.log(e, '看看生日日期')
				this.form.birth_date = e.result;
			},
			getPetDetail(item) {
				let data = {
					id: item.id
				};

				petDetail(data).then((res) => {
					if (res.code == 200) {
						this.petDetailData = res.data
						console.log(res.data.sex, '宠物详情666')
						// if (res.data.sex) {
						// 	if (res.data.sex == 1) {
						// 		this.sexIndex = 0
						// 	} else {
						// 		this.sexIndex = 1
						// 		// console.log('xxxxxx')
						// 	}
						// }
						this.sexIndex = res.data.sex == 1 ? 0 : 1
						console.log(12313)
						this.sexIndex = parseInt(this.itemData.sex) - 1
						// 解决方案三
						this.form = Object.assign({}, res.data);
						this.$set(this.form, 'cate_id', res.data.cate_id.toString());
						console.log(this.form, '看看form')

					}
				}).catch((res) => {})
			},
			PetCateList() {
				this.cate_list = [];
				this.cate_list_array = [];
				getPetCateList({}).then((res) => {
					console.log(res, '获取的宠物分类列表')
					if (res.code == 200) {
						this.cate_list_array = res.data;
						this.cate_list = res.data.map(item => {
							return item.name
						})
						if (this.form.cate_id) {
							res.data.forEach((item, index) => {
								if (this.form.cate_id == item.id) {
									this.cate_id = index
								}
							})
						}
					}

				}).catch((res) => {})
			},
			submit() {
				let that = this;
				this.dataJson = JSON.parse(JSON.stringify(this.form))
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						if (that.pageStatus == 'add') {
							addPet(that.form).then((res) => {
								if (res.code == 200) {
									uni.showToast({
										title: '添加成功',

									})
									uni.$emit('isRefresh', this.form.card_code)
									// uni.navigateBack({
									// 	delta: 1
									// });
									uni.switchTab({
										url: '/pages/pet/pet'
									})
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'

									})
								}
							}).catch((res) => {})
						} else if (that.pageStatus == 'edit') {

							petEdit(that.form).then((res) => {

								if (res.code == 200) {
									uni.showToast({
										title: '编辑成功',

									})
									// uni.navigateBack({
									// 	delta: 1
									// });
									uni.switchTab({
										url: '/pages/pet/pet'
									})
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'

									})
								}
							}).catch((res) => {})
						}

					} else {
						console.log('验证失败');
					}
				});
			},
			changeFun(e) {
				console.log(e, '看看名称')
				this.form.intdate = e;
				console.log(this.form.intdate, '看看选中的宠物生日')
				// 	this.details.carNumber = e;
				// 	let indexOf;
				// 	this.list.forEach((item,index)=>{
				// 		if(item.value==this.details.reportName){
				// 			indexOf=1;
				// 		}
				// 	})

				// 	if(this.details.reportName==undefined||this.details.reportName==''||indexOf==1){
				// 		this.$set(this.details,'reportName',e)

				// 	}

			},
			cateChangeFun(e) {
				this.cate_id = e.detail.value;
				this.$set(this.form, 'cate_id', this.cate_list_array[e.detail.value].id.toString());
				// this.form.cate_id = this.cate_list_array[e.detail.value].id.toString()
				console.log(this.cate_list_array[e.detail.value].id)
				// console.log(this.form.cate_id, '选择的宠物分类')
			},
			birthChangeFun(e) {
				console.log(e.detail.value)
				this.form.birth_date = e.detail.value;
			},
			sexchangeFun(e) {
				this.sexIndex = e.detail.value;
				this.form.sex = this.sexListArray[e.detail.value].value;
			},
			phone_1changeFun(e) {
				this.form.phone_1 = e;
			},
			phone_2changeFun(e) {
				this.form.phone_2 = e;
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			// 在页面中定义上传图片的方法
			chooseImage() {
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数
					success: (res) => {

						const tempFilePaths = res.tempFilePaths

						this.uploadImage(tempFilePaths[0])
					}
				})
			},
			uploadImage(filePath) {
				let that = this;
				uni.uploadFile({
					url: configJson.base_url + '/api/ajax/uploads', // 上传图片的接口地址
					filePath: filePath,
					name: 'file',
					success: (res) => {
						res = JSON.parse(res.data)
						if (res.code == 200) {
							that.form.head = res.data.url
						}

						console.log(res, '看看上传的图片')
						// 图片上传成功后的处理逻辑
					}
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},

	};
</script>

<style lang="scss" scoped>
	.item::after {
		content: "*";
		color: red;
		margin-right: 2px;
	}

	.addPet {
		width: 100%;
		display: flex;

	}

	.addPetTopBack {
		width: 750rpx;
		height: 257rpx;
		background: linear-gradient(180deg, #FAE24E 0%, rgba(250, 226, 78, 0) 100%);
		padding: 40rpx 0 0 30rpx;
		box-sizing: border-box;
	}

	.formClass {
		width: 690rpx;
		display: flex;
		flex-direction: column;
	}

	.addPetTop {
		width: 690rpx;
		// height: 355rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		flex-direction: column;
		padding: 43rpx 39rpx 46rpx 21rpx;
		box-sizing: border-box;
	}

	.addPetTopOne {
		padding-bottom: 46rpx !important;
	}

	.addPetTopTow {
		padding-bottom: 59rpx !important;
		margin-top: 20rpx;
	}

	.addPetTopTitleDiv {
		display: flex;
		align-items: center;
	}

	.addPetTopTitleLeft {
		width: 8rpx;
		height: 30rpx;
		background: #FAE24E;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		border: 1rpx solid #683518;
	}

	.addPetTopTitleText {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		margin-left: 9rpx;

	}

	.addPetBottom {
		display: flex;
		align-items: center;
		padding-left: 18rpx;
		box-sizing: border-box;
		margin-top: 21rpx;
	}

	.uploadDiv {
		width: 200rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		border: 1rpx dashed #B6AAA3;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.uploadImg {
		width: 200rpx;
		height: 200rpx;
	}

	.uploadLiDiv {
		width: 57.81rpx;
		height: 56.46rpx;

	}

	.marginTop20 {
		margin-top: 20rpx;
	}

	.kongbai {
		width: 100%;
		// height: 162rpx;
		height: 222rpx;
	}

	.submitButtonClass {
		width: 750rpx;
		height: 98rpx;
		background: #FED24C;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #5D5353;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 3;
	}

	::v-deep .addPetBottom .u-form-item__message {
		padding-left: 30rpx !important;
	}

	.placeholder {
		color: rgb(192, 196, 204);
	}
</style>